<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>React State</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

</head>

<body>

    <div id="example"></div>
    <div id="example2"></div>

    <script type="text/babel">
        function Demo(props) {
            const {name, age, sex} = props;
            return (
                <ul>
                    <li>姓名：{name}</li>
                    <li>年龄：{age + 1}</li>
                    <li>性别：{sex}</li>
                </ul>
            );
        }

        // 函数式组件传递参数，只认识第一个，而且会默认把所有参数全部收集起来，组成对象；参数名字随便
        // 后面的参数则忽略了
        function Demo2(name, age) {
            console.log(name); //{name: "shujun", age: 32}
            console.log(age); // {}
            return (
                <ul>
                    <li>姓名：{name.name}</li>
                    <li>年龄：{name.age + 1}</li>
                </ul>
            );
        }

        ReactDOM.render(<Demo name="shujun" age="32" sex="man" />, document.getElementById('example'));
        ReactDOM.render(<Demo2 name="shujun" age={32} />, document.getElementById('example2'));
   
    </script>

</body>

</html>